/**
 * Created by Administrator on 2017/3/30.
 */
import sel from '../../../../index.js';

export default {
  init:function () {
   sel.app.controller('api1C',['$scope','$http',
     function ($scope,$http) {
      $scope.title = '黑板(根据d3的拖拽api进行操作完成的)';
      let pad = sel.d3.select('.svgContain').append('svg').attr('width',1000).attr('height',1000);

       let lineG,lineData;
       var drag = sel.d3.drag()
       .on('start', function(){
         let x = sel.d3.event.x;
         let y = sel.d3.event.y;
         lineData = 'M'+ x+ " " + y ;
         lineG = sel.d3.select('.paper').append('g').append('path').attr('class','lines').attr('fill','none').attr('stroke','black');
       })
       .on('drag', function(data){
         let x = sel.d3.event.x;
         let y = sel.d3.event.y;
         data.pos.x += sel.d3.event.dx;
         data.pos.y += sel.d3.event.dy;
         sel.d3.select(this)
         .attr('transform', ['translate(', data.pos.x  , ',', data.pos.y, ')'].join(''));
         lineData += ('L'+x + ' '+ y);
         lineG.attr('d',lineData);
       })
       .on('end', function(){
         over()
       });
      pad.append('g')
        .attr('class','paper')
        .datum({pos:{x:0,y:0}})
        .attr('transform','translate(500,100)')
        .append('circle')
        .attr('r',10)
        .attr('fill','black')
        .call(drag)
       ;

       let over = function () {
        var obj  = {path : lineData};
        let length = lineG.node().getTotalLength();
        lineG.style('stroke-dasharray',length).style('stroke-dashoffset',length).classed('goOn',true);

         lineData = null;
         lineG = null;
       };


   }]) ;
  }
}